<template>
    <div id="centeractiondetail" class="centeractiondetail">
        <!-- <a class="returnback" @click="goback()">
            <img :src="`${constant.imgUrl}design/caseback.png`" alt>
        </a> -->
        <!-- 用户轨迹、预约 -->
        <div class="record">
            <div class="record_switch">
                <div class="record_switch_item" :class="{active:index == tabIndex}" v-for="(item, index) in tabData" :key="index" @click="switchTab(index)">{{item.name}}({{item.total}})</div>
            </div>
            <!-- 轨迹 -->
            <div class="record_list" v-if="tabIndex == 0">
                <ul class="">
                    <!-- <van-list class="trajectory_list" v-model="user_loading" :finished="user_finished" finished-text="没有更多了" @load="getUserList"> -->
                        <li class="record_wrap" v-for="(item, index) in user_list" :key="index" @click="jumpDetUrl(item.referer)">
                            <div class="record_top">
                                <!--<div class="record_type">{{item.stats_type_name}} - {{item.path_name}}</div>-->
                                <div class="record_type">{{item.view_time_last}}</div>
                            </div>
                            <div class="record_bottom">
                                <div class="record_img" :class="{'attr_img' : item.path_name == '用户详情'}" v-if="false">
                                    <!-- <img :src="item.user_picture" alt> -->
                                    <img :src="`${constant.imgUrl}common/14.png`" alt>
                                </div>
                                <div class="record_bottom_right">
                                    <div class="record_bottom_main">{{item.path_name}}</div>
                                   <!-- <div>访问案例</div>-->
                                </div>
                                <!-- div class="icon_rightzh">
                                    <img :src="`${constant.imgUrl}login/right.png`" alt="">
                                </div>-->
                            </div>
                        </li>
                        <AppWrapperEmpty
                        :is-empty="false"
                        :is-loading="user_loading"
                        :finished="user_finished"/>
                    <!-- </van-list> -->
                </ul>
            </div>
            <!-- 直接裂变 -->
            <div class="direct" v-if="tabIndex == 1">
                <div class="direct_box">
                    <div class="direct_switch">
                        <div class="direct_switch_item" :class="{active:index == directTabIndex}" v-for="(item, index) in dateRange" :key="item.name" @click="switchDirectDate(item.type, index)">{{item.name}}</div>
                    </div>
                    <div class="direct_datepicker">
                        <p class="direct_datepicker_label">自定时间</p>
                        <p class="direct_datepicker_item" @click="directStartShow">{{directStartDateStr}}</p>
                        <p class="direct_connector">-</p>
                        <p class="direct_datepicker_item" @click="directEndShow">{{directEndDateStr}}</p>
                    </div>
                    <wPicker
                        @confirm="directStartConfirm"
                        mode="yearMonth"
                        ref="directStartDateShow"
                        :defaultVal="defaultVal"
                     />
                     <wPicker
                        @confirm="directEndConfirm"
                        mode="yearMonth"
                        ref="directEndDateShow"
                        :defaultVal="defaultVal"
                     />
                    <!-- <van-datetime-picker class="date_range_picker" v-model="currentDate" type="date" :max-date="directEndDate" @confirm="directStartConfirm" @cancel="directStartCancel" v-show="directStartDateShow"/>
                    <van-datetime-picker class="date_range_picker" v-model="currentDate" type="date" :min-date="directStartDate" @confirm="directEndConfirm" @cancel="directEndCancel" v-show="directEndDateShow"/> -->
                </div>
                <!-- list -->
                <div class="direct_title">
                    <div>到店用户</div>
                    <div>推荐人</div>
                    <div>推荐时间</div>
                </div>
                <div :style="{height: vanListHei + 'px'}">
                    <ul class="direct_list">
                        <!-- <van-list v-model="direct_loading" :finished="direct_finished" finished-text="没有更多了" @load="getDirectList"> -->
                            <li class="direct_list_item_wrap" v-for="(item, index) in direct_list" :key="item.stats_id">
                                <div class="direct_list_img">
                                    <img :src="item.user_picture" alt>
                                    <span class="ellipsis_line_com">{{item.nick_name}}</span>
                                </div>
                                <div>无</div>
                                <div>{{item.view_time_last}}</div>
                            </li>
                             <AppWrapperEmpty
                                :is-empty="false"
                                :is-loading="direct_loading"
                                :finished="direct_finished" />
                        <!-- </van-list> -->
                    </ul>
                </div>
            </div>
            <!-- 间接裂变 -->
            <div class="indirect" v-if="tabIndex == 2">
                <div class="direct_box">
                    <div class="direct_switch">
                        <div class="direct_switch_item" :class="{active:index == indirectTabIndex}" v-for="(item, index) in dateRange" :key="index" @click="switchIndirectDate(item.type, index)">{{item.name}}</div>
                    </div>
                    <div class="direct_datepicker">
                        <p class="direct_datepicker_label">自定时间</p>
                        <p class="direct_datepicker_item" @click="indirectStartShow">{{indirectStartDateStr}}</p>
                        <p class="direct_connector">-</p>
                        <p class="direct_datepicker_item" @click="indirectEndShow">{{indirectEndDateStr}}</p>
                    </div>
                    <wPicker
                        :defaultVal="defaultVal"
                        @confirm="indirectStartConfirm"
                        mode="yearMonth"
                        ref="indirectStartDateShow"
                     />
                     <wPicker
			            :defaultVal="defaultVal"
                        @confirm="indirectEndConfirm"
                        mode="yearMonth"
                        ref="indirectEndDateShow"
                     />
                    <!-- <van-datetime-picker class="date_range_picker" v-model="currentDate" type="date" :max-date="indirectEndDate" @confirm="indirectStartConfirm" @cancel="indirectStartCancel" v-show="indirectStartDateShow"/>
                    <van-datetime-picker class="date_range_picker" v-model="currentDate" type="date" :min-date="indirectStartDate" @confirm="indirectEndConfirm" @cancel="indirectEndCancel" v-show="indirectEndDateShow"/> -->
                </div>
                <!-- list -->
                <div class="direct_title">
                    <div>到店用户</div>
                    <div>推荐人</div>
                    <div>推荐时间</div>
                </div>
                <div :style="{height: vanListHei + 'px'}">
                <ul class="direct_list">
                    <!-- <van-list v-model="indirect_loading" :finished="indirect_finished" finished-text="没有更多了" @load="getIndirectList"> -->
                        <li class="direct_list_item_wrap" v-for="(item, index) in indirect_list" :key="index">
                            <div class="direct_list_img">
                                <img :src="item.user_picture" alt>
                                <span class="ellipsis_line_com">{{item.nick_name}}</span>
                            </div>
                            <div>{{item.nick_name}}</div>
                            <div>{{item.view_time_last}}</div>
                        </li>
                        <AppWrapperEmpty
                                :is-empty="false"
                                :is-loading="indirect_loading"
                                :finished="indirect_finished" />
                    <!-- </van-list> -->
                </ul>
                </div>
            </div>
        </div>
        <footer>
            <v-userDetFooter :phone="userinfo_data.mobile_phone"></v-userDetFooter>
        </footer>
    </div>
</template>
<script>
// import Vue from 'vue'
// import { List, DatetimePicker } from 'vant'
import UserDetFooter from '@/components/module/UserDetFooter'
import { $formatDate } from '@/utils/util'
// import {$formatDate } from '@/util/common'
// Vue.use(List)
/* Vue.use(DatetimePicker)*/
import apiCenter from '@/api/center'
import { list } from '@/mixins'
import wPicker from '@/components/w-picker/components/w-picker'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
export default {
	name: 'CenterActionDetail',
	components: {
		'v-userDetFooter': UserDetFooter,
		wPicker,
		AppWrapperEmpty
		// DatetimePicker
	},
	mixins: [list],
	data() {
		return {
			currentDate: new Date(),
			// 直接裂变日期选择
			directStartDate: new Date(),
			directEndDate: new Date(),
			directStartDateStr: '开始时间',
			directEndDateStr: '结束时间',
			directStartDateShow: false,
			directEndDateShow: false,
			// 间接裂变日期选择
			indirectStartDate: new Date(),
			indirectEndDate: new Date(),
			indirectStartDateStr: '开始时间',
			indirectEndDateStr: '结束时间',
			indirectStartDateShow: false,
			indirectEndDateShow: false,
			// 轨迹数据
			user_list: [],
			user_loading: false,
			user_finished: false,
			userCurrentPage: 1,
			userinfo_data: '',
			// 直接裂变数据
			direct_list: [],
			direct_loading: false,
			direct_finished: false,
			directCurrentPage: 1,
			directTabIndex: 0,
			directTab_type: 'today',
			// 间接裂变数据
			indirect_list: [],
			indirect_loading: false,
			indirect_finished: false,
			indirectCurrentPage: 1,
			indirectTabIndex: 0,
			indirectTab_type: 'today',
			end_time: '',
			tabIndex: 0,
			tabData: [{ name: '轨迹', total: 0 }, { name: '直接裂变', total: 0 }, { name: '间接裂变', total: 0 }],
			dateRange: [{ name: '今天', type: 'today' }, { name: '昨天', type: 'yesterday' }, { name: '近一周', type: 'recent_week' }, { name: '近一月', type: 'recent_month' }],
			// 返回的页面
			// page_type: '',
			vanListHei: 400,
			constant: this.$constant,
			query: null,
			defaultVal: [49, 8]
		}
	},
	onLoad(val) {
		this.query = val
	},
	mounted() {
		this.end_time = this.dateFormat(new Date())
		this.tabIndex = this.query.tabIndex
		// if (this.tabIndex == 0) {
		// 	this.getDirectList()
		// 	this.getIndirectList()
		// } else if (this.tabIndex == 1) {
		this.getUserList()
		this.getIndirectList()
		this.getDirectList()
		// } else if (this.tabIndex == 2) {
		// 	this.getUserList()
		// 	this.getDirectList()
		// }
	},
	onReachBottom() {
		if (this.tabIndex == 0) {
			this.getUserList()
		} else if (this.tabIndex == 1) {
			this.getDirectList()
		} else if (this.tabIndex == 2) {
			this.getIndirectList()
		}
	},
	methods: {
		// getListHei() {
		// 	let hei = document.body.clientHeight
		// 	this.vanListHei = hei - 250
		// 	$('.record_list').css('height', (hei - 120) + 'px')
		// 	// this.vanListHei = hei
		// },
		// 直接裂变
		directStartShow() {
			this.$refs.directStartDateShow.show()
		},
		directEndShow() {
			this.$refs.directEndDateShow.show()
		},
		// directStartCancel() {
		// 	this.$refs.directStartDateShow.show()
		// },
		directEndCancel() {
			this.directEndDateShow = false
		},
		directStartConfirm(val) {
			console.log(val)
			this.directStartDate = val
			this.directStartDateStr = val.result
			// this.directStartDateShow = false

			this.direct_list = []
			this.directCurrentPage = 1

			this.getDirectList({
				start_time: this.directStartDateStr,
				end_time: this.directEndDateStr
			})
		},
		directEndConfirm(val) {
			this.directEndDate = val
			this.directEndDateStr = val.result
			// this.directEndDateShow = false

			this.direct_list = []
			this.directCurrentPage = 1

			this.getDirectList({
				start_time: this.directStartDateStr,
				end_time: this.directEndDateStr
			})
		},
		// 间接裂变
		indirectStartShow() {
			this.$refs.indirectStartDateShow.show()
		},
		indirectEndShow() {
			// this.indirectEndDateShow = true
			this.$refs.indirectEndDateShow.show()
		},
		// indirectStartCancel() {
		// 	this.indirectStartDateShow = false
		// },
		// indirectEndCancel() {
		// 	this.indirectEndDateShow = false
		// },
		indirectStartConfirm(val) {
			this.indirectStartDate = val
			this.indirectStartDateStr = this.dateFormat(val).split(' ')[0]
			this.indirectStartDateShow = false

			this.indirect_list = []
			this.indirectCurrentPage = 1

			this.getDirectList({
				start_time: this.indirectStartDateStr,
				end_time: this.indirectEndDateStr
			})
		},
		indirectEndConfirm(val) {
			this.indirectEndDate = val
			this.indirectEndDateStr = this.dateFormat(val).split(' ')[0]
			this.indirectEndDateShow = false

			this.indirect_list = []
			this.indirectCurrentPage = 1

			this.getDirectList({
				start_time: this.indirectStartDateStr,
				end_time: this.indirectEndDateStr
			})
		},
		// 轨迹
		getUserList(data) {
			this.user_loading = true
			let params = {
				create_user_id: this.query.create_user_id,
				limit: 10,
				page: this.userCurrentPage
			}

			// params.append('etime', etime)
			// data && data.type && params.append('stimeType', data.type)
			// data && data.start_time && params.append('stime', data.start_time)
			// data && data.end_time && params.append('etime', data.end_time)

			apiCenter.getUserList(params).then(res => {
				if (res.status === 'success') {
					// 有无下一页
					let data = res.data
					this.tabData[0].total = res.data.total
					if (data.data.length !== 0) {
						// this.userinfo_data = data.uesr_chain
						for (let i in data.data) {
							data.data[i].view_time_last = $formatDate(data.data[i].view_time_last * 1000)
						}
						this.user_list = this.user_list.concat(data.data)
						this.userCurrentPage++
					}

					if (data.data.length < 10) {
						this.user_finished = true
					}

					this.user_loading = false
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		getDataTimestamp(time) {
			let etime = time
			etime = new Date(etime)
			etime = etime.getTime()
			return etime
		},
		// 直接裂变
		getDirectList(data) {
			let params = {
				create_user_id: this.query.create_user_id,
				limit: 10,
				page: this.indirectCurrentPage
			}
			if (this.directTab_type) {
				params.stimeType = this.directTab_type
			}
			if (data && data.start_time) {
				params.stime = this.getDataTimestamp(data.start_time)
			}
			if (data && data.end_time) {
				params.etime = this.getDataTimestamp(data.end_time)
			}
			apiCenter.getDirectList(params).then(res => {
				if ((res.status = 'success')) {
					this.tabData[1].total = res.data.total
					let data = res.data

					if (data.data.length !== 0) {
						for (let i in data.data) {
							data.data[i].view_time_last = $formatDate(data.data[i].view_time_last * 1000, 'YYYY-MM-DD')
						}
						// this.direct_list = this.direct_list.concat(data.data)
						this.direct_list = [...this.direct_list, ...data.data]
						this.directCurrentPage++
					}

					if (data.data.length < 10) {
						this.direct_finished = true
					}

					this.direct_loading = false
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		switchDirectDate(type, index) {
			this.directTabIndex = index
			this.direct_list = []
			this.direct_loading = false
			this.direct_finished = false
			this.directCurrentPage = 1
			this.directTab_type = type
			this.getDirectList({ type: type })
		},
		// 间接裂变
		getIndirectList(data) {
			this.indirect_loading = true
			let params = {
				create_user_id: this.query.create_user_id,
				limit: 10,
				page: this.indirectCurrentPage
			}
			if (this.indirectTab_type) {
				params.stimeType = this.indirectTab_type
			}
			if (data && data.start_time) {
				params.stime = this.getDataTimestamp(data.start_time)
			}
			if (data && data.end_time) {
				params.etime = this.getDataTimestamp(data.end_time)
			}
			apiCenter.getIndirectList(params).then(res => {
				if ((res.status = 'success')) {
					this.tabData[2].total = res.data.total
					let data = res.data
					if (data.data.length !== 0) {
						for (let i in data.data) {
							data.data[i].view_time_last = $formatDate(data.data[i].view_time_last * 1000, 'YYYY-MM-DD')
						}
						this.indirect_list = this.indirect_list.concat(data.data)
						this.indirectCurrentPage++
					}

					if (data.data.length < 10) {
						this.indirect_finished = true
					}
					this.indirect_loading = false
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		switchIndirectDate(type, index) {
			this.indirectTabIndex = index
			this.indirect_list = []
			this.indirect_loading = false
			this.indirect_finished = false
			this.indirectCurrentPage = 1
			this.indirectTab_type = type
			this.getIndirectList({ type: type })
		},
		switchTab(index) {
			this.tabIndex = index
		},
		dateFormat(date) {
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			let hour = date.getHours()
			let min = date.getMinutes()
			let second = date.getSeconds()
			return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + second
		},
		// 轨迹详情跳转
		jumpDetUrl(url) {
			//  location.href = url
			let query = {
				owner_user_id: this.query.create_user_id
			}
			uni.navigateTo({
			// url: `/pages/design/material/index${this.commonJS.queryData(query)}`
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.direct_list _ul {
    padding-bottom: 100px;
}
/* 客户详情页面 */
.centeractiondetail {
    background-color: #f5f5f5;
}
.centeractiondetail header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    width: 100%;
    height: 88px;
    background-color: #fff;
    box-sizing: border-box;
}
.centeractiondetail .header_back {
    display: inline-block;
    width: 20px;
    height: 34px;
    // background: url($imgUrl + 'center/back.png') center center / 100% 100% no-repeat;
}
.centeractiondetail .header_caption {
    font-size: 36px;
    color: #030303;
}
.centeractiondetail .info {
    margin-top: 20px;
    padding-left: 40px;
    background-color: #fff;
    box-sizing: border-box;
}
.centeractiondetail .info_user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd; /*no*/
    box-sizing: border-box;
}
.centeractiondetail .info_user_left {
    line-height: 150px;
}
.centeractiondetail .info_head {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    border-radius: 50%;
}
.centeractiondetail .info_detail {
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
}
.centeractiondetail .info_name {
    font-size: 34px;
    line-height: 34px;
    color: #333;
}
.centeractiondetail .info_mobile {
    margin-top: 10px;
    font-size: 24px;
    line-height: 24px;
    color: #999;
}
.centeractiondetail .info_user_right {
    padding-right: 40px;
    line-height: 150px;
}
.centeractiondetail .info_dial,
.centeractiondetail .info_note {
    display: inline-block;
    margin-left: 50px;
    text-align: center;
    line-height: 1;
    vertical-align: middle;
}
.centeractiondetail .icon_info_dial,
.centeractiondetail .icon_info_note {
    display: inline-block;
    width: 49px;
    height: 49px;
    line-height: 49px;
    background: center center / 100% 100% no-repeat;
}
.centeractiondetail .icon_info_dial {
   // background-image: url($imgUrl +'center/icon_dial.png');
}
.centeractiondetail .icon_info_note {
   // background-image: url($imgUrl + 'center/icon_note.png');
}
.centeractiondetail .info_func_tip {
    font-size: 20px;
    color: #999;
    line-height: 20px;
}
.centeractiondetail .info_chain {
    padding: 20px 0 30px;
}
.centeractiondetail .info_chain_caption {
    font-size: 24px;
    color: #666;
}
.centeractiondetail .info_chain_box {
    margin-top: 10px;
    height: 60px;
    line-height: 60px;
}
.centeractiondetail .info_chain_item {
    display: inline-block;
    margin-right: 30px;
    vertical-align: middle;
}
.centeractiondetail .info_chain_head {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    vertical-align: top;
}
.centeractiondetail .info_chain_name {
    display: inline-block;
    margin-left: 10px;
    height: 60px;
    max-width: 200px;
    font-size: 30px;
    color: #666;
    line-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.centeractiondetail .info_chain_arrow {
    display: inline-block;
    margin-right: 30px;
    width: 22px;
    height: 18px;
    background: url($imgUrl  + 'center/icon_arrow.png') center center / 100% 100% no-repeat;
    /* vertical-align: middle; */
}
.centeractiondetail .record {
    /* margin-top: 20px; */
    /* font-size: 0; */
}
.centeractiondetail .record_switch {
    width: 100%;
    height: 90px;
    background-color: #fff;
    border-bottom: 1px solid #ddd; /*no*/
    box-sizing: border-box;
}
.centeractiondetail .record_switch_item {
    position: relative;
    display: inline-block;
    width: 33.333%;
    height: 100%;
    text-align: center;
    line-height: 90px;
    font-size:24px;
    color: #999;
    vertical-align: top;
}
.centeractiondetail .record_switch_item.active {
    font-size:24px;
    color: #333;
}
.centeractiondetail .record_switch_item.active::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(50% - 30px);
    width: 60px;
    height: 6px;
    background-color: #ffd11a;
}
.centeractiondetail .record_list {
    margin-top: 20px;
    padding: 0 40px;
    box-sizing: border-box;
}
.centeractiondetail .record_item {
    margin-bottom: 20px;
    padding: 30px 30px 20px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 15px;
}
.centeractiondetail .record_info {
    position: relative;
    width: 100%;
    height: 60px;
}
.centeractiondetail .record_head {
    margin-right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    vertical-align: middle;
}
.centeractiondetail .record_name {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    font-size: 34px;
    color: #333;
    vertical-align: middle;
}
.centeractiondetail .record_time {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 24px;
    color: #999;
    line-height: 60px;
    vertical-align: middle;
}
.centeractiondetail .record_detail {
    padding-left: 80px;
    font-size: 24px;
    line-height: 42px;
    color: #666;
    box-sizing: border-box;
}
.centeractiondetail .direct {
    width: 100%;
    background-color: #f5f5f5;
}

.centeractiondetail .direct_box {
    padding: 30px 40px;
    background-color: #fff;
    box-sizing: border-box;
}

.centeractiondetail .direct_switch {
    width: 670px;
    height: 60px;
    font-size: 0;
}

.centeractiondetail .direct_switch_item {
    display: inline-block;
    height: 100%;
    width: 25%;
    font-size: 24px;
    color: #666;
    line-height: 60px;
    text-align: center;
    border: 1px solid #ddd; /*no*/
    box-sizing: border-box;
}
.centeractiondetail .direct_switch_item.active {
    color: #3a1b04;
    background-color: #ffd11a;
    border-color: #ffd11a;
}
.centeractiondetail .direct_switch_item:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.centeractiondetail .direct_switch_item:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.centeractiondetail .direct_datepicker {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

.centeractiondetail .direct_datepicker_label {
    font-size: 24px;
    color: #ff6900;
}

.centeractiondetail .direct_datepicker_item {
    width: 232px;
    height: 60px;
    font-size:24px;
    color: #333;
    text-align: center;
    line-height: 60px;
    border: 1px solid #ddd; /*no*/
    border-radius: 30px;
}

.centeractiondetail .direct_connector {
    font-size: #ccc;
    font-size:24px;
}

.centeractiondetail .direct_list {
    margin: 20px auto;
    width: 670px;
    padding-bottom: 100px;
}

.centeractiondetail .direct_list_item {
    margin-bottom: 20px;
    padding: 30px;
    width: 670px;
    height: 160px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 15px;
}

.centeractiondetail .direct_info {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.centeractiondetail .direct_info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.centeractiondetail .direct_name {
    margin-left: 20px;
    font-size: 24px;
    color: #333;
}

.centeractiondetail .direct_time {
    position: absolute;
    top: 18px;
    right: 0;
    line-height: 24px;
    font-size: 24px;
    color: #999;
}

.centeractiondetail .direct_chain {
    margin-top: 20px;
    padding-left: 80px;
    font-size: 24px;
    color: #666;
    line-height: 24px;
}

.centeractiondetail .icon_right_arrow {
    display: inline-block;
    position: relative;
    top: 3px;
    margin: 0 5px;
    width: 22px;
    height: 18px;
    background: url($imgUrl + 'center/icon_arrow.png') center center / 100% 100% no-repeat;
    vertical-align: top;
}
#centeractiondetail {
    background-color: #fff;
    .record_list {
        margin-top: 40px;
        padding-bottom: 1px;
        ul {
            margin-top: 4px;
            border-left: 2px solid #ccc;
        }
        .record_wrap {
            padding-left: 30px;
            margin-bottom: 50px;
            .record_top {
                position: relative;
                top: -10px;
                display: flex;
                align-items: center;
                color: #666;
                .record_type {
                    font-size: 24px;
                }
                & > div {
                    margin-right: 20px;
                }
            }
            .record_top::before {
                position: absolute;
                left: -42px;
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 4px solid #fff;
                border-radius: 50%;
                background-color: #ccc;
            }
            .record_bottom {
                border-radius: 16px;
                margin-top: 20px;
                display: flex;
                align-items: center;
                position: relative;
                background-color: #f5f5f5;
                padding: 30px 0 30px 20px;
               /* background: url(../../../assets/image/login/right.png) right center / 15px 24px no-repeat;*/
                .record_img {
                    width: 168px;
                    height: 130px;
                    margin-right: 20px;
                    img {
                        width: 100%;
                        height: 100%;
                        border-top-left-radius: 16px;
                        border-bottom-left-radius: 16px;
                    }
                }
                .icon_rightzh{
                    top: 40%;
                    right: 20px;
                    width: 15px;
                    height: 30px;
                    position: absolute;
                    img{
                        width: 15px;
                        height: 30px;
                        float: right;
                    }
                }
                .attr_img {
                    width: 130px;
                }
                .record_bottom_main {
                    color: #333;
                    font-size: 24px;
                    margin-bottom: 10px;
                }
            }
        }
        .record_wrap:nth-child(1) {
            .record_type {
                color: #333;
            }
            .record_top::before {
                background-color: #ff9600;
            }
        }
    }
    .direct,
    .indirect {
        background-color: #fff;
        .direct_title {
            display: flex;
            align-items: center;
            height: 70px;
            color: #999;
            padding-left: 40px;
            background-color: #f5f5f5;
            div {
                width: 33.33%;
            }
        }
        .direct_list {
            margin-left: 0;
            margin-right: 0;
            padding-left: 40px;
            width: calc(100% - 40px);
            .direct_list_item_wrap {
                display: flex;
                align-items: center;
                height: 100px;
                padding: 0px;
                width: 100%;
                border-bottom: 2px solid #ddd;
                div {
                    width: 33.33%;
                }
                .direct_list_img {
                    display: flex;
                    align-items: center;
                    img {
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                    }
                    span {
                        margin-left: 10px;
                        width: calc(100% - 70px);
                    }
                }
            }
        }
    }
}
</style>
